<template>
    <div>
        <div class="myheader">
            <el-input
                v-model="listQuery.admin_name"
                placeholder="姓名"
                style="width: 200px;left: 10px;"
                class="filter-item"
                @keyup.enter.native="handleFilter"
            />

            <el-button
                v-waves
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
            >搜索</el-button>
            
        </div>
        <el-table id="form" :data="tableData" border fit stripe style="width: 99%">
            <el-table-column prop="id" label="id" width="50" align="center"></el-table-column>
            <el-table-column prop="img_url" label="照片" width="140" align="center">
                <template slot-scope="scope">
            　　　　<img :src="scope.row.img_url1" width="100" class="head_pic"/>
            　　</template>
            </el-table-column>
            <el-table-column prop="admin_name" label="名字" width="100" align="center"></el-table-column>
            <el-table-column prop="admin_sex" label="性别" width="80" align="center"></el-table-column>
            <el-table-column prop="admin_nation" label="民族" width="80" align="center"></el-table-column>
            <el-table-column prop="admin_card" label="身份证号码" width="160" align="center"></el-table-column>
            <el-table-column prop="admin_address" label="地址" width="100" align="center"></el-table-column>
            <el-table-column prop="department_name" label="部门" width="100" align="center"></el-table-column>
            <el-table-column prop="admin_phone" label="手机号" width="100" align="center"></el-table-column>
            <el-table-column prop="sos_name" label="紧急联系人" width="100" align="center"></el-table-column>
            <el-table-column prop="sos_ship" label="紧急联系人关系" width="100" align="center"></el-table-column>
            <el-table-column prop="sos_phone" label="紧急联系人电话" width="100" align="center"></el-table-column>
            <!-- <el-table-column prop="worktype_name" label="工种" width="100" align="center"></el-table-column> -->
            <el-table-column prop="entry_time" label="入职时间" width="150" align="center"></el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="230"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
                    <el-button
                        v-if="row.status!='deleted'"
                        size="mini"
                        type="danger"
                        @click="del_address(row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.pageNo"
            :limit.sync="listQuery.pageSize"
            @pagination="getTableData"
        />

        <el-dialog
            :visible.sync="dialogPvVisible"
            :title="dialogStatus=='create'?'添加员工信息':'修改员工信息'"
        >
            <el-form
                ref="dataForm"
                :rules="rules"
                :model="temp"
                label-position="left"
                label-width="100px"
                style="width: 400px; margin-left:50px;"
            >
                <el-form-item label="姓名" prop="admin_name">
                    <el-input v-model="temp.admin_name" />
                </el-form-item>
                <el-form-item label="性别" prop="admin_sex">
                    <el-input v-model="temp.admin_sex" />
                </el-form-item>
                <el-form-item label="民族" prop="admin_nation">
                    <el-input v-model="temp.admin_nation" />
                </el-form-item>
                <el-form-item label="身份证号" prop="admin_card">
                    <el-input v-model="temp.admin_card" />
                </el-form-item>
                <el-form-item label="地址" prop="admin_address">
                    <el-input v-model="temp.admin_address" />
                </el-form-item>
                <el-form-item label="部门">
                    <el-select
                        v-model="temp.department_id"
                        filterable
                        placeholder="请选择"
                        style="float:left" 

                    >
                        <el-option
                            v-for="item in options8"
                            :key="item.id"
                            :label="item.department_name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="工种">
                    <el-select
                        v-model="temp.worktype_id"
                        filterable
                        placeholder="请选择"
                        style="float:left"
                    >
                        <el-option
                            v-for="item in options3"
                            :key="item.id"
                            :label="item.worktype_name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="手机号" prop="admin_phone">
                    <el-input v-model="temp.admin_phone" />
                </el-form-item>
                <el-form-item label="紧急联系人" prop="sos_name">
                    <el-input v-model="temp.sos_name" />
                </el-form-item>
                <el-form-item label="紧急联系人关系" prop="sos_ship">
                    <el-input v-model="temp.sos_ship" />
                </el-form-item>
                <el-form-item label="紧急联系人电话" prop="sos_phone">
                    <el-input v-model="temp.sos_phone" />
                </el-form-item>

                <el-form-item class="pic" style label="照片" prop="admin_img">
                <el-upload
                    v-model="temp.admin_img"
                    class="avatar-uploader"
                    action="http://192.168.1.106:8891/img/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img id="zpp" v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <!-- <img id="zpp" alt src class="avatar" /> -->
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogPvVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="btnloading"
                    @click="dialogStatus==='create'?createData():updateData()"
                >确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },

    methods: {
//         getList($event){
//         console.log(this.temp.sub_id)
//         let me = this;
// me.temp.section_id = localStorage.getItem('section_id');
//             ajax('worktype/SelectWorktype', {sub_id:this.temp.sub_id, section_id: me.temp.section_id }, function(data) {
//                 me.options3 = data;
//             });
//         },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            // this.$message(res);
            this.temp.admin_img = res;
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt10M = file.size / 1024 / 1024 < 10;

            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt10M) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            return isLt10M;
        },
        getTableData1() {
        //     let me = this;

        //    ajax('worktype/SelectWorktype', {sub_id:this.temp.sub_id, section_id: 1 }, function(data) {
        //         me.options3 = data;
        //     });
        },

        getTableData2() {
            let me = this;
me.temp.section_id = localStorage.getItem('section_id');
            ajax('department/SelectDepartment', { section_id: me.temp.section_id }, function(data) {
                me.options8 = data;
            });
        },
        getList() {
            var me = this;
            me.listQuery.section_id=localStorage.getItem('section_id');
            ajax('sectionStaff/FindAdminStaff', this.listQuery, function(data) {
                var arr = data.items;
                for (var i = 0; i < arr.length; i++) {
                    arr[i].img_url1 = 'http://192.168.1.106:8891/img/download_img?img_url=' + arr[i].admin_img;
                }
                me.tableData = arr;
                // console.log(arr,5555)
               me.total = data.total;
                me.listQuery.pageNo = data.pageNo;
                me.listQuery.pageSize = data.pageSize;
            });
        },
        handleFilter() {
            this.listQuery.page = 1;
            this.getList();
        },
        handleUpdate(row) {
            this.dialogStatus = 'update';
            this.dialogPvVisible = true;
            this.temp = Object.assign({}, row); // copy obj
            // 当更改data中数据后，得到更新后的DOM
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate();
            });

            //点击编辑，加载联动接口
            var me=this;
            me.temp.section_id = localStorage.getItem('section_id');
               ajax('worktype/SelectWorktype', {sub_id:this.temp.sub_id, section_id:me.temp.section_id}, function(data) {
                me.options3 = data;
                // console.log(data,9988)
            });
        },
        del_address(row) {
            var me = this;
            this.$confirm('永久删除该员工, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    ajax('sectionStaff/DeleteAdminStaff', { id: row.id }, function(data) {
                        if (data == 1) {
                            me.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            me.getTableData();
                        } else {
                            me.$message({
                                type: 'success',
                                message: '删除失败!'
                            });
                        }
                    });
                    me.getList();
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                me.getList();
        },
        resetTemp() {
            this.temp = {
                img_url: '',
                admin_nation: '',
                admin_card: '',
                admin_address: '',
                admin_name: '',
                id: '',
                admin_sex: '',
                department_name: '',
                admin_phone: '',
                sos_name: '',
                sos_ship: '',
                sos_phone: '',
                worktype_name: '',
                entry_time: ''
            };
        },
        getTableData() {
            var me = this;
            ajax('sectionStaff/FindAdminStaff', this.listQuery, function(data) {
                me.dialogPvVisible = false;
                me.tableData = data.items;
                var arr = data.items;

                me.total = data.total;
                me.listQuery.pageNo = data.pageNo;
                me.listQuery.pageSize = data.pageSize;
            });
            me.getList()
        },
        updateData() {
            this.$refs['dataForm'].validate(valid => {
                if (valid) {
                    var me = this;
                    this.btnloading = true;
                    ajax('sectionStaff/UpdateAdminStaff', this.temp, function(data) {

                
                        me.getList();
                        me.getTableData();
                        me.dialogPvVisible = false;
                        me.btnloading = false;
                        me.$message({
                            title: '成功',
                            message: '修改成功',
                            type: 'success',
                            duration: 2000
                        });
                        me.resetTemp();
                        me.getList();
                    });
                }
            });
            me.getList()
        },
        createData() {
            this.$refs['dataForm'].validate(valid => {
                if (valid) {
                    var me = this;
                    this.btnloading = true;
                    ajax('sectionStaff/InsertAdminStaff', this.temp, function(data) {
                        me.getTableData();
                        me.dialogPvVisible = false;
                        me.btnloading = false;
                        me.$message({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        });
                    });
                }
            });
        },
        handleCreate() {
            this.dialogStatus = 'create';
            this.dialogPvVisible = true;
            this.resetTemp();
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate(); //清除验证
            });
        }
    },

    data() {
        return {
            img_url1: '',
            imageUrl: '',
            options2: [],
            options3: [],
            options8: [],
            listQuery: {
                section_id:'',
                pageNo: 1,
                pageSize: 10,
                img_url: '',
                admin_name:''
            },
            total: 100,
            rules: {
                img_url: [{ required: true, message: '照片不能为空！', trigger: 'blur' }],
                admin_nation: [{ required: true, message: '民族不能为空！', trigger: 'blur' }],
                admin_sex: [{ required: true, message: '性别不能为空！', trigger: 'blur' }],
                admin_card: [{ required: true, message: '身份证号不能为空！', trigger: 'blur' }],
                admin_address: [{ required: true, message: '地址不能为空！', trigger: 'blur' }],
                department_name: [{ required: true, message: '部门不能为空！', trigger: 'blur' }],
                admin_phone: [{ required: true, message: '手机号不能为空！', trigger: 'blur' }],
                sos_name: [{ required: true, message: '紧急联系人不能为空！', trigger: 'blur' }],
                sos_ship: [{ required: true, message: '紧急联系人关系不能为空！', trigger: 'blur' }],
                sos_phone: [{ required: true, message: '紧急联系人电话不能为空！', trigger: 'blur' }],
                worktype_name: [{ required: true, message: '工种不能为空！', trigger: 'blur' }],
                entry_time: [{ required: true, message: '入职时间不能为空！', trigger: 'blur' }],
                admin_name: [{ required: true, message: '姓名不能为空！', trigger: 'blur' }],
                admin_address: [{ required: true, message: '详细地址不能为空！', trigger: 'blur' }],
                id: [{ required: true, message: 'id不能为空！', trigger: 'blur' }]
            },
            temp: {
                img_url: '',
                admin_nation: '',
                admin_card: '',
                admin_address: '',
                department_name: '',
                admin_phone: '',
                sos_name: '',
                sos_ship: '',
                sos_phone: '',
                worktype_name: '',
                entry_time: '',
                admin_name: '',
                admin_sex: '',
                id: '',
                admin_img:''
            },
            dialogStatus: 'create',
            dialogPvVisible: false,
            tableData: [],
            btnloading: false
        };
    },
    created() {
        var me = this;
        me.getTableData();
        me.getList();
        me.getTableData1();
        me.getTableData2();
    }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.pic >>> .el-upload--text {
    width: 180px;
}
</style>